<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#container {
	height: 100%
}
</style>

<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=1.5&ak=rYVxmf0ssyqoBGuQEcQ4L0qE"></script>
</head>

<body>
	<div id="container"></div>
	<script type="text/javascript">
	var markerArr=[
		{title:"张三",point:"113.078869,28.255521",job:"业务经理",tel:"123321"},
		{title:"李四",point:"113.04659,28.264833",job:"业务员1",tel:"123456"},
		{title:"赵六",point:"113.02459,28.265833",job:"业务员2",tel:"123456"},
		{title:"王八",point:"113.08269,28.267833",job:"业务员3",tel:"123456"},
		{title:"王五",point:"113.051715,28.25261",job:"业务员4 ",tel:"456554"},];
		var map = new BMap.Map("container"); // 创建地图实例   
		
		var point = new BMap.Point(113.040, 28.250); // 创建点坐标   
		map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别

	    map.enableScrollWheelZoom(); //启动鼠标滚轮缩放地图
	    map.enableKeyboard(); //启动键盘操作地图
	    map.enableContinuousZoom();   // 开启连续缩放效果                 
	    map.enableInertialDragging(); // 开启惯性拖拽效果 
	    
	    
	    for(var i=0;i<markerArr.length;i++){
	    	p0 = markerArr[i].point.split(",")[0]; //
	    	//alert(p0);
	    	p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
	    	var pointMarker = new BMap.Point(p0, p1);  // 创建标注的坐标
	 	   //设置图标
	 	   if(i==1){
		 	   var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
	                        offset: new BMap.Size(-10,-20), // 指定定位位置  
	                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
	                    }); 
	    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
	 		   
	 	   }else if(i==2){
	 		  var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
                  offset: new BMap.Size(-10,-20), // 指定定位位置  
                  imageOffset: new BMap.Size(0, 0 - 0 * 25) // 设置图片偏移  
              }); 
	    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
	 	   }else if(i==3){
		 		  var myIcon = new BMap.Icon("images/arrow_down.png", new BMap.Size(23, 25), {  
	                  offset: new BMap.Size(-10,-20), // 指定定位位置  
	                  imageOffset: new BMap.Size(0, 0 - 0 * 50) // 设置图片偏移  
	              }); 
		    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
		 	}else if(i==4){
		 		  var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
	                  offset: new BMap.Size(-10,-20), // 指定定位位置  
	                  imageOffset: new BMap.Size(0, 0 - 12 * 25) // 设置图片偏移  
	              }); 
		    		var marker = new BMap.Marker(pointMarker,{icon:myIcon});        // 创建标注
		 	}else{
	    	var marker = new BMap.Marker(pointMarker);        // 创建标注
	 		   
	 	   }
	 	   
	 	    var label = new BMap.Label(markerArr[i].title,{"offset":new BMap.Size(-10,-20)});//label的偏移量，为了让label的中心显示在点上
	         marker.setLabel(label);
	         marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

	         var _iw = new BMap.InfoWindow("<b>职务:"+markerArr[i].job+"</b><br/><div>电话:<a href=\"javascript:myjavascript.call('"+markerArr[i].tel+ "')\">" +markerArr[i].tel+ "</a></div>");
	         marker.addEventListener("click",function(){
	             this.openInfoWindow(_iw);
	         });
	         _iw.addEventListener("open",function(){
	             marker.getLabel().hide();
	         })
	         _iw.addEventListener("close",function(){
	             marker.getLabel().show();
	         })
	         label.addEventListener("click",function(){
	             marker.openInfoWindow(_iw);
	         })
	 	     map.addOverlay(marker);                     // 将标注添加到地图中
	    }
	   
	    
	    
	</script>
</body>
</html>
